<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Voxesis - 登录</title>
    <link rel="shortcut icon" href="/login/logo_no_background.png" type="image/x-icon">
    <style>
        :root {
            --spacing-xxs: 0.25rem;
            --spacing-xs: 0.5rem;
            --spacing-sm: 0.75rem;
            --spacing-md: 1rem;
            --spacing-lg: 1.5rem;
            --spacing-xl: 2rem;
            --spacing-xxl: 3rem;

            --radius-xs: 0.125rem;
            --radius-sm: 0.25rem;
            --radius-md: 0.5rem;
            --radius-lg: 0.75rem;
            --radius-xl: 1rem;
            --radius-full: 9999px;

            --font-size-xs: 0.75rem;
            --font-size-sm: 0.875rem;
            --font-size-base: 1rem;
            --font-size-md: 1.125rem;
            --font-size-lg: 1.25rem;
            --font-size-xl: 1.5rem;
            --font-size-xxl: 2rem;
            --font-size-xxxl: 3rem;

            --font-weight-normal: 400;
            --font-weight-medium: 500;
            --font-weight-semibold: 600;
            --font-weight-bold: 700;

            --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

            --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
            --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
            --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);

            --color-primary: #42b883;
            --color-primary-hover: #34a773;
            --color-primary-light: #4895ef;
            --color-primary-dark: #3a0ca3;
            --color-text: #2b2d42;
            --color-text-secondary: #8d99ae;
            --color-background: #f8f9fa;
            --color-background-secondary: #edf2f4;
            --color-background-tertiary: #e5e5e5;
            --color-background-elevated: #ffffff;
            --color-border: #d8d8d8;
            --color-border-hover: #adb5bd;
            --color-scrollbar-thumb: #cbd5e0;
            --color-scrollbar-thumb-hover: #a0aec0;
            --color-success: #22c55e;
            --color-warning: #f59e0b;
            --color-error: #ef4444;

            --border-radius: 8px;
            --border-radius-sm: 4px;

            --transition: all 0.2s ease;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
            height: 100%;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            font-size: var(--font-size-base);
            line-height: 1.5;
            color: var(--color-text);
            background-color: var(--color-background);
            overflow: hidden;
        }

        .login-container {
            display: flex;
            height: 100vh;
            width: 100vw;
            overflow: hidden;
            position: relative;
        }

        .login-background {
            flex: 1;
            background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: var(--spacing-xl);
            color: white;
            position: relative;
            overflow: hidden;
            background-size: 200% 200%;
        }

        .login-background::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('') repeat;
            opacity: 0.1;
        }

        .logo-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: var(--spacing-xl);
            z-index: 1;
        }

        .logo {
            width: 80px;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(10px);
            position: relative;
        }

        .logo::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 80px;
            height: 80px;
            margin-bottom: var(--spacing-md);
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: var(--radius-lg);
            animation-name: movement;
            animation-duration: 3s;
            animation-iteration-count: infinite;
            animation-delay: 0.1s;
        }

        .logo-text {
            font-size: var(--font-size-xxl);
            font-weight: var(--font-weight-bold);
            margin-bottom: var(--spacing-xs);
        }

        .logo-subtitle {
            font-size: var(--font-size-sm);
            opacity: 0.8;
            text-align: center;
            max-width: 300px;
        }

        .login-form-container {
            width: 450px;
            background-color: var(--color-background-elevated);
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: var(--spacing-xl);
            box-shadow: var(--shadow-lg);
            z-index: 10;
            position: relative;
        }

        .login-header {
            margin-bottom: var(--spacing-xl);
            text-align: center;
        }

        .login-title {
            font-size: var(--font-size-xl);
            font-weight: var(--font-weight-semibold);
            margin-bottom: var(--spacing-xs);
            color: var(--color-text);
        }

        .login-subtitle {
            font-size: var(--font-size-sm);
            color: var(--color-text-secondary);
        }

        .login-form {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-md);
        }

        .form-group {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-xs);
        }

        .form-label {
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-medium);
            color: var(--color-text);
        }

        .form-input {
            padding: var(--spacing-sm) var(--spacing-md);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-md);
            font-size: var(--font-size-base);
            transition: var(--transition-fast);
            background-color: var(--color-background);
            color: var(--color-text);
        }

        .form-input:focus {
            outline: none;
            border-color: var(--color-primary);
            box-shadow: 0 0 0 2px rgba(66, 184, 131, 0.2);
        }

        .form-input::placeholder {
            color: var(--color-text-secondary);
        }

        .form-options {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            font-size: var(--font-size-sm);
        }

        .form-submit {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .forgot-password {
            color: var(--color-primary);
            text-decoration: none;
            transition: var(--transition-fast);
        }

        .forgot-password:hover {
            color: var(--color-primary-dark);
            text-decoration: underline;
        }

        .login-button {
            width: 100%;
            padding: var(--spacing-sm) var(--spacing-md);
            background-color: var(--color-primary);
            color: white;
            border: none;
            border-radius: var(--radius-md);
            font-size: var(--font-size-base);
            font-weight: var(--font-weight-medium);
            cursor: pointer;
            transition: var(--transition-fast);
            position: relative;
            overflow: hidden;
            margin-top: var(--spacing-sm);
        }

        .login-button:hover {
            background-color: var(--color-primary-hover);
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }

        .login-button:active {
            transform: translateY(0);
        }

        .delay-1 {
            animation-delay: 0.1s;
        }

        .delay-2 {
            animation-delay: 0.2s;
        }

        .delay-3 {
            animation-delay: 0.3s;
        }

        .slide-in-right {
            opacity: 0;
            animation-name: slideInRight;
            animation-duration: 0.8s;
            animation-fill-mode: forwards;
        }

        .slide-in-left {
            opacity: 0;
            animation-name: slideInLeft;
            animation-duration: 0.8s;
            animation-fill-mode: forwards;
        }

        .pulse {
            animation: pulse 1s infinite;
        }

        .movement {
            animation-name: movement;
            animation-duration: 3s;
            animation-iteration-count: infinite;
        }

        @media (max-width: 768px) {
            .login-container {
                flex-direction: column;
            }

            .login-background {
                display: none;
            }

            .login-form-container {
                width: 100%;
                height: 100%;
            }
        }

        @keyframes slideInLeft {
            from {
                opacity: 0;
                transform: translateX(-50px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes slideInRight {
            from {
                opacity: 0;
                transform: translateX(50px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(66, 184, 131, 0.4);
            }
            70% {
                box-shadow: 0 0 0 10px rgba(66, 184, 131, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(66, 184, 131, 0);
            }
        }

        @keyframes movement {
            0% {
                transform: scale(1.1);
            }
            50% {
                transform: scale(1);
            }
            100% {
                transform: scale(1.1);
            }
        }
    </style>
    <style>
        .message {
            max-width: calc(100% - 32px);
            padding: 8px 10px;

            display: flex;
            align-items: center;
            justify-content: center;

            font-size: 0.7rem;
            border-radius: 4px;
            border-style: solid;
            border-width: 1px;
            box-sizing: border-box;

            position: fixed;
            left: 50%;
            opacity: 0;
            transform: translateX(-50%) translateY(5px);

            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);

            animation: MessageShow 0.4s ease forwards,
            MessageHide 0.4s ease forwards 2s;

            z-index: 9999;
        }

        .message.success {
            color: #67c23a;
            background-color: rgb(240, 249, 235);
        }

        .message.error {
            color: #f56c6c;
            background-color: rgb(255, 235, 237);
        }

        .message.warning {
            color: #e6a23c;
            background-color: rgb(255, 243, 205);
        }

        @keyframes MessageShow {
            0% {
                transform: translateY(5px);
                opacity: 0;
            }
            100% {
                transform: translateY(0);
                opacity: 1;
            }
        }

        @keyframes MessageHide {
            0% {
                transform: translateY(0);
                opacity: 1;
            }
            100% {
                transform: translateY(-50px);
                opacity: 0;
            }
        }
    </style>
</head>
<body>
<div class="login-container">
    <div class="login-background">
        <div class="logo-container">
            <div class="logo slide-in-left delay-1">
                <img src="/login/logo_no_background.png" class="movement delay-1" width="60" height="60"
                     alt="logo">
            </div>
            <div class="slide-in-left delay-2">
                <h1 class="logo-text movement delay-2">Voxesis</h1>
            </div>
            <div class="slide-in-left delay-3">
                <p class="logo-subtitle movement delay-3">高效、可靠的服务器管理平台</p>
            </div>
        </div>
    </div>

    <div class="login-form-container">
        <div class="login-header">
            <h2 class="login-title slide-in-right">欢迎回来</h2>
            <p class="login-subtitle slide-in-right delay-1">请登录您的账户以继续</p>
        </div>

        <form class="login-form" id="loginForm">
            <div class="form-group slide-in-right delay-1">
                <label for="username" class="form-label">用户名</label>
                <input type="text" id="username" class="form-input" placeholder="请输入用户名" required>
            </div>

            <div class="form-group slide-in-right delay-2">
                <label for="password" class="form-label">密码</label>
                <input type="password" id="password" class="form-input" placeholder="请输入密码" required>
            </div>

            <div class="form-options slide-in-right delay-3">
                <a href="#" class="forgot-password">忘记密码?</a>
            </div>

            <div class="form-submit slide-in-right delay-3">
                <button type="submit" class="login-button pulse" id="loginButton">登录</button>
            </div>
        </form>
    </div>
</div>

<script>
    // message box

    function showMessage(message, type) {
        let messageDom = document.createElement('div');
        messageDom.classList.add('message', type);
        messageDom.innerHTML = message;

        let existingMessages = document.querySelectorAll('.message');
        let verticalOffset = 20 + existingMessages.length * 50;
        messageDom.style.top = verticalOffset + 'px';

        document.body.appendChild(messageDom);

        setTimeout(() => {
            if (messageDom.parentNode) {
                messageDom.parentNode.removeChild(messageDom);
                rearrangeMessages();
            }
        }, 2400);
    }

    function rearrangeMessages() {
        let messages = document.querySelectorAll('.message');
        messages.forEach((msg, index) => {
            msg.style.top = (20 + index * 50) + 'px';
        });
    }

</script>

<script>
    const loginForm = document.getElementById('loginForm')

    loginForm.addEventListener('submit', async function (e) {
        e.preventDefault();

        const username = document.getElementById('username').value;
        const password = document.getElementById('password').value;

        if (!username || !password) {
            alert('请输入用户名和密码');
            return;
        }

        const loginButton = document.getElementById('loginButton');
        loginButton.textContent = '登录中...';
        loginButton.disabled = true;

        const response = await fetch("/api/login", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                username: username,
                password: password,
            })
        })
        const data = await response.json()

        if (response.ok) {
            showMessage('登录成功! 即将跳转至面板。', 'success');

            setTimeout(() => {
                window.location.href = '/dashboard';
            }, 500)
        } else
            showMessage(`登录失败! ${data.message}`, 'error');

        loginButton.textContent = '登录';
        loginButton.disabled = false;
    });
</script>

</body>
</html>